<template>
	<div>
		<ma-body>
			<ma-refresh slot="content" :safeBottom="false">
				<div class="big-box">
					<div class="swiper-box">
						<u-swiper :list="bannerList" bgColor="#000000" name="img" height="308" border-radius="48" @click="onSwiper"></u-swiper>
					</div>
					
					<div class="brand-list">
						<div class="brand-item" v-for="item in page.list" @tap="toBrandDetail(item.info.id)">
							<image :src="item.info.cover" mode="aspectFill" class="brand-img"></image>
							<div class="info-box">
								<div class="text-box">
									<span class="jiu-font32-fff">{{ item.info.title }}</span>
								</div>
								<image src="@/static/img/enter16FFF.png" mode="aspectFill" class="image427"></image>
							</div>
							<div class="sum-box">
								<span class="jiu-font24-555" style="color: #FFCE80;">收录藏品共{{ item.spuCount }}件</span>
							</div>
							<scroll-view scroll-x="true" style="width: 100%;white-space: nowrap;margin-top: 4.27vw;">
								<div style="display: flex;">
									<div style="width: 100%;margin-left: 2.13vw;">
										<image v-for="item1 in item.spuImgList" :src="item1" mode="aspectFill" class="image17" style="margin-right: 2.13vw;border-radius: 2.13vw;"></image>
									</div>
								</div>
							</scroll-view>
							<!-- <swiper :indicator-dots="false" circular="true" :autoplay="false" :interval="1500" duration="1400" easing-function="easeInOutCubic" :duration="1000" style="height: 18vw;" previous-margin="268rpx" next-margin="268rpx">
								<swiper-item>
								</swiper-item>
							</swiper> -->
						</div>
					</div>
				</div>
				<div>
					<div style="display: flex;flex-direction: column;justify-content: center;padding-bottom: 3.2vw;margin-top: 8.53vw;">
						<span class="jiu-font24-555" style="text-align: center;">粤ICP备2022082571号</span>
						<span class="jiu-font24-555" style="text-align: center;">联系方式：13168957016</span>
						<span class="jiu-font24-555" style="text-align: center;">九歌(广州)文化科技有限公司</span>
					</div>
				</div>
			</ma-refresh>
			
		</ma-body>
	</div>
</template>

<script>
	import Refresh from '@/$ma/common/js/refresh.js';
	export default{
		data(){
			return{
				swiperList: ['/static/img/swiper.jpg'],
				page: new Refresh(this, {
					apiName: 'getProductBrand'
				}),
				bannerList: []
			}
		},
		methods:{
			onSwiper(e) {
				if(this.bannerList[e].urlType == 'h5'){
					window.location.href = this.bannerList[e].url;
				}else if(this.bannerList[e].urlType == 'app'){
					let url = '/'+this.bannerList[e].url;
					uni.navigateTo({
						url: url
					})
				}
			},
			async getBannerList(){
				let res = await this.$u.api.getTenantBanner({
					bannerType: 'brand'
				})
				this.bannerList = res;
			},
			toBrandDetail(id){
				this.$ma.route.brandDetail({
					id:id
				})
			}
		},
		onLoad() {
			this.page.onRefresh();
			this.getBannerList();
		}
	}
</script>

<style lang="scss">
	/deep/.u-swiper-indicator {
		padding: 0 !important;
		left: 6.4vw;
		bottom: 4.27vw !important;
		justify-content: flex-start !important;
		
	}
	
	/deep/.u-indicator-item-round {
		width: 1.07vw;
		height: 1.07vw;
		background-color: #555555;
		border-radius: 50%;
		opacity: 0.6;
	}
	
	/deep/.u-indicator-item-round-active {
		width: 1.07vw;
		height: 1.07vw;
		border-radius: 1.07vw;
		background-color: #FFCE80;
	}
	.image427{
		width: 4.27vw;
		height: 4.27vw;
	}
	.image17{
		width: 17.07vw;
		height: 17.07vw;
	}
	.big-box {
		padding-top: 4.27vw;
		background-color: #000000;
	
		.swiper-box {
			margin: 0 4.27vw;
		}
		
		.brand-list{
			display: flex;
			flex-direction: column;
			padding: 0 4.27vw;
			margin-top: 1.6vw;
			.brand-item{
				margin-top: 2.67vw;
				display: flex;
				flex-direction: column;
				padding-bottom: 6.4vw;
				background-color: #1B1B1B;
				border-radius: 6.4vw;
				position: relative;
				.brand-img{
					width: 100%;
					height: 41.6vw;
					border-radius: 6.4vw 6.4vw 0 0;
				}
				.sum-box{
					padding: 2.13vw 4.27vw;
					background-color: #1B1B1B;
					border-radius: 0 0 2vw 2vw;
					position: absolute;
					right: 6.4vw;
					top: 41.6vw;
					z-index: 1;
				}
				.info-box{
					padding: 0 6.4vw;
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					position: absolute;
					top: 27.2vw;
					height: 14.4vw;
					background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #1B1B1B 100%);
				}
				.text-box{
					display: flex;
					flex-direction: column;
					.jiu-font24-555{
						color: #FFCE80;
						margin-top: 1.07vw;
					}
				}
			}
		}
	}
</style>